<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
  <meta charset="utf-8">
  <title>{{title}}</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="{{materialTheme}}">
  <meta name="description" content="{{description}}">
  {{!-- twitter --}}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@mcmeadow">
  <meta name="twitter:creator" content="@mcmeadow">
  <meta name="twitter:title" content="{{title}}">
  <meta name="twitter:description" content="{{description}}">
  <meta name="twitter:image" content="{{social-media-image}}">
  {{!-- open graph--}}
  <meta property="og:title" content="{{title}}">
  <meta property="og:type" content="website">
  <meta property="og:description" content="{{description}}">
  <meta property="og:site_name" content="{{site-name}}">
  <meta property="og:url" content="{{canonical-url}}">
  <meta property="og:image" content="{{social-media-image}}">
  <meta property="og:image:type" content="image/png" />
  <meta name="google-site-verification" content="{{google-site-verification-key}}" />
  <link rel="canonical" href="{{canonical-url}}">
  <script>var LOG = {{ loggingEnabled }};</script>
  <script src="{{interpreterSourceFile}}" defer integrity="{{ SRIHash }}"></script>
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js" async></script>
  <script async src="https://www.googletagmanager.com/gtag/js?id={{trackingID}}"></script>
  {{!-- onLoad the loadEventEnd hasn't fired yet (and 'loadend' doesn't work on the window),
    so to measure the onLoad we have two choices:
    - use timing.loadEventStart(which usually fires a few milliseconds before and will be off - ish)
    - use a timer to only record this stuff a few seconds later.
  --}}
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag(
      'config',
      '{{trackingID}}',
      {
        'custom_map': {
          'dimension1': 'dim_timing',
          'dimension2': 'dim_timing_firstInteractive',
          'dimension3': 'dim_timing_loadEnd'
        }
      }
    );
    window.addEventListener(
      'load',
      () => {
        window.setTimeout(
          function () {
            gtag(
              'event',
              'performance',
              {
                'event_category': 'page_timing',
                'dim_timing_firstInteractive': performance.timing.domInteractive - performance.timing.navigationStart,
                'dim_timing_loadEnd': performance.timing.loadEventEnd - performance.timing.navigationStart
              }
            );
          },
          5000
        );
      },
      {
        once: true,
        passive: true
      }
    );
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="purple">
  <style>
    #render {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }

    body {
      background-color: {
          {
          background-color
        }
      }
    }

    textarea {
      border: none;
      font-family: monospace;
      color: white;
      background-color: black;
    }

    fieldset label {
      min-width: 4.6em
    }
  </style>
</head>

<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        {{!-- Title --}}
        <span class="mdl-layout-title" id="version">state machine cat</span>
        {{!-- Add spacer, to align navigation to the right --}}
        <div class="mdl-layout-spacer"></div>
        {{!-- Navigation. We hide it in small screens. --}}
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link"
            href="https://github.com/sverweij/state-machine-cat/blob/develop/README.md#short-tutorial"
             rel="noopener noreferrer"
            title="Go to HOWTO. Opens in new tab" target="tutorial">
            <i class="material-icons" role="presentation">help</i>
          </a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <style>
        .demo-list-item {
          width: 300px;
        }
      </style>
      <ul class="demo-list-item mdl-list">
        <fieldset>
          <legend>Output type</legend>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="svg">
                <input type="radio" id="svg" class="mdl-radio__button" name="outputtyperg" value="svg" checked>
                <span class="mdl-radio__label">SVG</span>
              </label>
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="dot">
                <input type="radio" id="dot" class="mdl-radio__button" name="outputtyperg" value="dot">
                <span class="mdl-radio__label">DOT</span>
              </label>
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="json">
                <input type="radio" id="json" class="mdl-radio__button" name="outputtyperg" value="json">
                <span class="mdl-radio__label">JSON</span>
              </label>
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="smcat">
                <input type="radio" id="smcat" class="mdl-radio__button" name="outputtyperg" value="smcat">
                <span class="mdl-radio__label">SMCAT</span>
              </label>
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="scxml">
                <input type="radio" id="scxml" class="mdl-radio__button" name="outputtyperg" value="scxml">
                <span class="mdl-radio__label">SCXML</span>
              </label>
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="scjson">
                <input type="radio" id="scjson" class="mdl-radio__button" name="outputtyperg" value="scjson">
                <span class="mdl-radio__label">SCXML as JSON</span>
              </label>
            </span>
          </li>
        </fieldset>
        <fieldset>
          <legend>Input type</legend>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_smcat">
                <input type="radio" id="input_smcat" class="mdl-radio__button" name="inputTyperg" value="smcat" checked>
                <span class="mdl-radio__label">SMCAT</span>
              </label>
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_json">
                <input type="radio" id="input_json" class="mdl-radio__button" name="inputTyperg" value="json">
                <span class="mdl-radio__label">JSON</span>
              </label>
            </span>
          </li>
          <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_scxml">
                <input type="radio" id="input_scxml" class="mdl-radio__button" name="inputTyperg" value="scxml">
                <span class="mdl-radio__label">SCXML</em></span>
              </label>
            </span>
          </li>
        </fieldset>
        <fieldset>
          <legend>Render parameters</legend>
          <div class="mdl-list__item">
            <label for="direction">direction</label>
            <select id="direction" title="Direction to render the state machine in">
              <option value="top-down" selected>top down</option>
              <option value="left-right">left to right</option>
              <option value="bottom-top">bottom to top</option>
              <option value="right-left">right to left</option>
            </select>
          </div>
          <div class="mdl-list__item">
            <label for="engine">engine</label>
            <select id="engine" title="list of engines to use for rendering">
              <optgroup label="hierarchical">
                <option value="dot" selected>dot</option>
                <option value="fdp">fdp</option>
                <option value="osage">osage</option>
              </optgroup>
              <optgroup label="non-hierarchical">
                <option value="circo">circo</option>
                <option value="neato">neato</option>
                <option value="twopi">twopi</option>
              </optgroup>
            </select>
          </div>
          <div class="mdl-list__item">
            <label for="theme">theme</label>
            <select id="theme" title="Theme (experimental!)">
              <option value="vanilla" selected>vanilla</option>
              <option value="engineering">engineering</option>
              <option value="reverse">reverse</option>
              <option value="contrast">high contrast</option>
              <option value="policetape">police tape</option>
              <option value="transparent">transparent</option>
              <option value="zany">zany</option>
            </select>
          </div>
          <div class="mdl-list__item">
            <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="fitToWidth">
              <input type="checkbox" id="fitToWidth" class="mdl-switch__input" unchecked>
              <span class="mdl-switch__label">fit to width</span>
            </label>
          </div>
          <div class="mdl-list__item">
            <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="desugar">
              <input type="checkbox" id="desugar" class="mdl-switch__input" unchecked>
              <span class="mdl-switch__label">desugar (experimental!)</span>
            </label>
          </div>
          <div class="mdl-list__item">
            <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="autoRender">
              <input type="checkbox" id="autoRender" class="mdl-switch__input" checked>
              <span class="mdl-switch__label">render automatically</span>
            </label>
          </div>
        </fieldset>

        <li class="mdl-list__item mdl-menu__item--full-bleed-divider"></li>

        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">code</i>
            <a class="mdl-navigation__link" rel="noopener noreferrer" href="https://github.com/sverweij/state-machine-cat">Source</a>
          </span>
        </li>
        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">help</i>
            <a class="mdl-navigation__link"
              href="https://github.com/sverweij/state-machine-cat/blob/develop/README.md#short-tutorial"
               rel="noopener noreferrer"
              target="tutorial">How to</a>
          </span>
        </li>

        <li class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">copyright</i>
            <a class="mdl-navigation__link"
              href="https://github.com/sverweij/state-machine-cat/blob/master/LICENSE"
               rel="noopener noreferrer">sverweij 2016-2020</a>
          </span>
        </li>

      </ul>
    </div>
    <main class="mdl-layout__content">
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
          <select name="sample" id="sample" value="{{root}}samples/mediaplayer.smcat">
            <optgroup label="simple state machines">
              <option value="{{root}}samples/on-off.smcat">on. off.</option>
              {{!-- <option value="{{root}}samples/PDSA.smcat">plan do study ...</option> --}}
              <option value="{{root}}samples/cat.smcat">cat</option>
              <option value="{{root}}samples/sprint-states.smcat">sprint states</option>
              <option value="{{root}}samples/vscode-issues-triaging.smcat">vscode issue triaging</option>
              <option value="{{root}}samples/tcp.smcat">tcp protocol</option>
            </optgroup>
            <optgroup label="nested state machines">
              <option value="{{root}}samples/mediaplayer.smcat">mediaplayer</option>
              <option value="{{root}}samples/phone.smcat">phone</option>
              <option value="{{root}}samples/karl.smcat">player states</option>
              <option value="{{root}}samples/parallel.smcat">parallel</option>
              <option value="{{root}}samples/bitbitggeranonymized.smcat">bigger, anonymized</option>
            </optgroup>
            <option value="{{root}}samples/empty.smcat">empty</option>
            <option value="{{root}}samples/cheatsheet.smcat">cheat sheet</option>
          </select>
          <textarea id="inputscript" rows="0" cols="10" aria-label="input script"></textarea>
        </div>
        <style>
          #contextmenu {
            box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.23);
            position: absolute;
            min-height: 0;
          }

          #contextmenu .mdl-list .mdl-list__item:nth-child(n+2):hover {
            background-color: #e0e0e0;
          }
        </style>
        <span id="contextmenu" class="mdl-card mdl-shadow--2dp" style="display: none">
          <ul class="mdl-list">
            <li class="mdl-list__item">
              <i class="material-icons">save</i>
              <span class="mdl-layout-title">save as</span>
            </li>
            <li class="mdl-list__item">
              <a class="mdl-list__item-primary-content mdl-navigation__link" id="save-png" rel="noopener" href="#"
                type="image/png" rel="noopener noreferrer" download="state-machine.png">Peaceful Nozzle Grins (PNG)</a>
            </li>
            <li class="mdl-list__item">
              <a class="mdl-list__item-primary-content mdl-navigation__link" id="save-svg" rel="noopener" href="#"
                type="image/svg+xml" rel="noopener noreferrer" download="state-machine.svg">Surviving Voronoi Guilt (SVG)</a>
            </li>
          </ul>
        </span>
        <div class="mdl-cell mdl-cell--8-col mdl-card mdl-center mdl-shadow--2dp" style="overflow:scroll " id="output">
          Loading...
        </div>
      </div>
      {{!-- Colored FAB button with ripple --}}
      <button
        class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent"
        id="render" style="display:none">
        <i class="material-icons" role="presentation">refresh</i>
        <span class="visuallyhidden">Render</span>
      </button>
    </main>
  </div>
  <script>
    window.inputscript.style.height = '${height}px'.replace('${height}', window.innerHeight - 100);          
  </script>
</body>

</html>
